<template>
    <el-form-item label="添加创意内容" :prop="`creatinfo.creative`">
        <div class="originality_box">
            <div class="flexbox flexcenter flexbetween">
                <div>
                    <el-button plain class="plain_blue" size="small" @click="addMateri()">
                        <div class="flexbox flexcenter"><img src="../../../assets/img/pot_video.svg" width="16" height="16" alt="" class="btn_img"> 添加视频</div>
                    </el-button>
                    <el-button plain class="plain_blue" size="small" @click="addPicture()" :disabled="dataForm.is_talent" v-if="dataForm.market=='VIDEO_PROM_GOODS' && createform.external_action=='AD_CONVERT_TYPE_SHOPPING' && dataForm.extension=='STANDARD'">
                        <div class="flexbox flexcenter"><img src="../../../assets/img/pot_picture.svg" width="16" height="16" alt="" class="btn_img"> 添加图片</div>
                    </el-button>
                    <el-button plain size="small" v-if="createform.creative_material_mode=='CUSTOM_CREATIVE' && createform.creatinfo.creative.length>0" @click="batchAddTitle(2)">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='#616C85' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="8" cy="8" r="5.25" stroke="inherit" stroke-width="1.5" />
                            </svg>
                            批量设置标题
                        </div>
                    </el-button>
                </div>
                <div class="">已选：{{createform.creatinfo.creative.length}}/{{getMaxNum}}</div>
            </div>
            <template v-if="createform.creatinfo.creative.length>0">
                <div class="origin_list1 flexbox" v-if="createform.creative_material_mode=='PROGRAMMATIC_CREATIVE'">
                    <div class="origin_cxh_item" v-for="(item,index) in createform.creatinfo.creative" :key="index">
                        <img src="../../../assets/img/close_icon.svg" alt="" class="origin_cxh_close" @click="deletMateri(index)">
                        <div class="origin_cxh_top">
                            <img :src="item.material.img_url" alt="" class="origin_cxh_img">
                            <template v-if="item.material.cate_type!='img'">
                                <div class="origin_cxh_title" v-if="item.material.image_mode=='VIDEO_VERTICAL'">竖版视频</div>
                                <div class="origin_cxh_title" v-else-if="item.material.image_mode=='VIDEO_LARGE'">横版视频</div>
                                <div class="origin_cxh_time">{{secondToTimeStr(item.material.duration)}}</div>
                            </template>
                        </div>
                        <div class="origin_cxh_footer flexbox flexcenter flexjust">
                            <template v-if="item.material.cate_type!='img'">
                                <el-link :underline="false" @click="editMateri(index)">换视频</el-link>
                                <el-divider direction="vertical"></el-divider>
                            </template>
                            <el-link :underline="false" @click="editPicture(index)" :disabled="item.material.type==3">换封面</el-link>
                        </div>
                    </div>
                </div>
                <template v-else>
                    <div class="origin_list2 flexbox" v-for="(item,index) in createform.creatinfo.creative" :key="index">
                        <div class="origin_cxh_item">
                            <div class="origin_cxh_top">
                                <img :src="item.material.img_url" alt="" class="origin_cxh_img">
                                <template v-if="item.material.cate_type!='img'">
                                    <div class="origin_cxh_title" v-if="item.material.image_mode=='VIDEO_VERTICAL'">竖版视频</div>
                                    <div class="origin_cxh_title" v-else-if="item.material.image_mode=='VIDEO_LARGE'">横版视频</div>
                                    <div class="origin_cxh_time">{{secondToTimeStr(item.material.duration)}}</div>
                                </template>
                            </div>
                            <div class="origin_cxh_footer flexbox flexcenter flexjust">
                                <template v-if="item.material.cate_type!='img'">
                                    <el-link :underline="false" @click="editMateri(index)">换视频</el-link>
                                    <el-divider direction="vertical"></el-divider>
                                </template>
                                <el-link :underline="false" @click="editPicture(index)" :disabled="item.material.type==3">换封面</el-link>
                            </div>
                        </div>
                        <div class="origin_zdy_info flex">
                            <el-form-item label="" :prop="`creatinfo.creative.${index}.title`" :rules="createRules.checkTitleTk">
                                <div slot="label" class="flexbox flexcenter flexbetween" style="width:421px">
                                    <span>创意标题</span>
                                    <img src="../../../assets/img/close_check.svg" alt="" @click="deletMateri(index)">
                                </div>
                                <el-popover placement="bottom" width="400" trigger="click" :disabled="item.material.type==3">
                                    <div class="flexbox flexcenter flexbetween">
                                        <div class="flexbox flexcenter">
                                            <span>插入动态词包：</span>
                                            <el-link :underline="false" class="ml_12" type="primary" @click="addWrodKey(item,word,index)" v-for="(word,windex) in keyWordFour" :key="windex">+{{word.name}}</el-link>
                                        </div>
                                        <el-link :underline="false" type="primary" @click="addMoreWord(item,index,1,'title')">+更多</el-link>
                                    </div>
                                    <el-input slot="reference" :disabled="item.material.type==3" @clear="clearWord(index)" @blur="blurEvent" @change="changeWordInfo(item,index)" clearable v-model="item.title" maxlength="500" show-word-limit placeholder="请输入内容" size="small"></el-input>
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="推广卡片" prop="title" style="margin-top:20px" v-if="item.material.cate_type=='video' && dataForm.market=='VIDEO_PROM_GOODS' && dataForm.extension=='STANDARD'">
                                <div class="flexbox flexcenter">
                                    <div class="card_box flexbox flexcenter">
                                        <img :src="item.card.car_img" alt="" class="card_img">
                                        <div class="card_info flex">
                                            <div class="card_name">{{item.card.car_name}}</div>
                                            <div class="card_text" v-for="(tag,tindex) in item.card.car_tag" :key="tindex" v-show="tindex==0">
                                                {{tag}}
                                            </div>
                                        </div>
                                        <span class="card_btn">{{item.card.car_link}}</span>
                                    </div>
                                    <el-link type="primary" :underline="false" style="margin-left:16px" @click="editCardInfo(item.card,index,1)">更改</el-link>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                </template>
            </template>
            <div class="creat_null" v-else>您还没有添加创意素材~</div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["createform", "dataForm", "createRules","keyWordFour","keyWordList"],
    name: "",
    data() {
        return {
            blurIndex: null,
        };
    },
    created() {},
    computed:{
        getMaxNum(){
            let max_num = null
            if(this.dataForm.extension=='STANDARD'&&this.dataForm.market=='VIDEO_PROM_GOODS'&&this.dataForm.campaign_scene=='NEW_CUSTOMER_TRANSFORMATION'){
                max_num = 94
            }else if(this.dataForm.extension=='SIMPLE'&&this.dataForm.market=='LIVE_PROM_GOODS'&&this.dataForm.campaign_scene=='NEW_CUSTOMER_TRANSFORMATION'){
                max_num = 50
            }else{
                max_num = 9
            }
            return max_num
        }
    },
    methods: {
        // 秒数转换
        secondToTimeStr(t) {
            if (!t) return;
            if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
            if (t < 3600)
                return (
                    "" +
                    ((a = parseInt(t / 60)) < 10 ? "0" + a : a) +
                    ":" +
                    ((i = t % 60) < 10 ? "0" + i : i)
                );
            if (3600 <= t) {
                var a,
                    i,
                    e = parseInt(t / 3600);
                return (
                    (e < 10 ? "0" + e : e) +
                    ":" +
                    ((a = parseInt((t % 3600) / 60)) < 10 ? "0" + a : a) +
                    ":" +
                    ((i = t % 60) < 10 ? "0" + i : i)
                );
            }
        },
        // 添加视频
        addMateri() {
            const attr = {
                dialogVsb: true,
                advertiser_id:
                    this.dataForm.tableData[0].hasAdver.advertiser_id,
                aweme_id: this.dataForm.tableData[0].hasAchor.aweme_id,
                product_id: this.dataForm.tableData[0].hasShop.product_id,
                is_qc: this.dataForm.tableData.length >= 2 ? true : false,
                length: this.createform.creatinfo.creative.length,
            };
            this.$bus.emit("addMateri", attr);
        },

        // 更换视频
        editMateri(index) {
            const attr = {
                dialogVsb: true,
                advertiser_id:
                    this.dataForm.tableData[0].hasAdver.advertiser_id,
                aweme_id: this.dataForm.tableData[0].hasAchor.aweme_id,
                product_id: this.dataForm.tableData[0].hasShop.product_id,
                is_qc: this.dataForm.tableData.length >= 2 ? true : false,
                index: index,
            };
            this.$bus.emit("editMateri", attr);
        },

        // 更换封面
        editPicture(index) {
            const attr = {
                dialogVsb: true,
                index: index,
            };
            this.$bus.emit("editPicture", attr);
        },

        // 删除视频
        deletMateri(index) {
            this.createform.creatinfo.creative.splice(index, 1);
            this.sessionSave();
        },

        // 添加图片
        addPicture() {
            const attr = {
                dialogVsb: true,
                length: this.createform.creatinfo.creative.length,
            };
            this.$bus.emit("addPicture", attr);
        },

        // 批量添加创意标题
        batchAddTitle(type) {
            const attr = {
                dialogVsb: true,
                type: type,
            };
            this.$bus.emit("batchAddTitle", attr);
        },

        // 添加创意词包-自定义
        addWrodKey(item, word, index) {
            if (item.dynamic_words.length >= 2) {
                this.$message.error("最多只能插入2个创意包");
                return;
            } else {
                let text = this.createform.creatinfo.creative[index].title;
                text =
                    this.createform.creatinfo.creative[index].title.slice(
                        0,
                        this.blurIndex
                    ) +
                    "{" +
                    word.name +
                    "}" +
                    this.createform.creatinfo.creative[index].title.slice(
                        this.blurIndex
                    );
                this.createform.creatinfo.creative[index].title = text;
                this.createform.creatinfo.creative[index].dynamic_words.push({
                    word_id: word.creative_word_id,
                    dict_name: word.name,
                    default_word: word.default_word,
                });
            }
            this.sessionSave();
        },

        // 更多创意词包-自定义
        addMoreWord(item, index, type, text) {
            const attr = {
                dialogVsb: true,
                title: item.dynamic_words,
                index: index,
                type: type,
            };
            this.$bus.emit("addMoreWord", attr);
        },

        //清空创意词包-自定义
        clearWord(index) {
            // this.createform.creatinfo.creative[index].dynamic_words = [];
            this.sessionSave();
        },

        // 获取光标位置
        blurEvent(e) {
            this.blurIndex = e.srcElement.selectionStart;
        },

        //创意词包验证-自定义
        changeWordInfo(val, index) {
            this.$nextTick(() => {
                let wordList = this.keyWordList;
                let arr = [];
                let arrAll = [];
                let ref2 = /\{(.+?)\}/g;
                let ref = /\{(.+?)\}/;
                let str = val.title.match(ref2);
                for (let i in str) {
                    let text = str[i].match(ref);
                    arrAll.push(text[1]);
                }
                for (let i in wordList) {
                    for (let a in arrAll) {
                        if (wordList[i].name == arrAll[a]) {
                            if (arr.length >= 2) {
                                return;
                            } else {
                                arr.push({
                                    word_id: wordList[i].creative_word_id,
                                    dict_name: wordList[i].name,
                                    default_word: wordList[i].default_word,
                                });
                            }
                        }
                    }
                }
                this.createform.creatinfo.creative[index].dynamic_words = arr;
                this.sessionSave();
            });
        },

        // 更改卡片信息
        editCardInfo(item, index, type) {
            const attr = {
                dialogVsb: true,
                card: item,
                index: index,
                type: type,
            };
            this.$bus.emit("editCardInfo", attr);
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

